<!--
@description ：续期首页
-->

<template>
  <div>
     <div class="homePage">
       <el-row :gutter="24">
         <el-col :span="17" style="padding-right: 0">
           <div class="card">
             <div class="title">
               <span class="title-r">继续率统计</span>
               <span class="title-b">更多 <i class="el-icon-arrow-right"></i></span>
             </div>
             <div class="content">
               <div id="chart1" style="width: 400px;height: 240px"></div>
               <div class="zhanbi" style="padding-top: 36px">
                 <div class="checkBox">
                   <el-radio-group v-model="activeName">
                     <el-radio label="1" border>保费</el-radio>
                     <el-radio label="2" border>件数</el-radio>
                   </el-radio-group>
                 </div>
                 <div class="show001">
                   <div class="showInfo" style="padding-right:44px;border-right: 1px solid rgb(220, 219, 219)">
                     <img src="../../../assets/renewal/shouye01.png" style="width: 38px;height: 38px;margin-right: 8px">
                     <div>
                       <div style="font-size: 14px;color: #000;margin-bottom: 6px">13月继续率</div>
                       <div style="font-size: 18px;color: #000;margin-bottom: 12px;font-weight: 500">61.71%</div>
                       <div style="font-size: 14px;color: rgb(155, 166, 187);margin-bottom: 6px">同比</div>
                       <div style="color: rgb(245, 108, 108)">-1.11pt <i class="el-icon-caret-bottom"></i></div>
                     </div>
                   </div>
                   <div class="showInfo" style="padding-left: 44px">
                     <img src="../../../assets/renewal/shouye02.png" style="width: 38px;height: 38px;margin-right: 8px">
                     <div>
                       <div style="font-size: 14px;color: #000;margin-bottom: 6px">25月继续率</div>
                       <div style="font-size: 18px;color: #000;margin-bottom: 12px;font-weight: 500">71.71%</div>
                       <div style="font-size: 14px;color: rgb(155, 166, 187);margin-bottom: 6px">同比</div>
                       <div style="color:rgb(103, 194, 58);">2.71pt <i class="el-icon-caret-top"></i></div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="card">
             <div class="title">
               <span class="title-r">达成率统计</span>
               <span class="title-b">更多 <i class="el-icon-arrow-right"></i></span>
             </div>
             <div class="content">
               <div id="chart2" style="width: 400px;height: 240px"></div>
               <div class="zhanbi">
                 <div class="checkBox">
                   <el-radio-group v-model="activeName2">
                     <el-radio label="1" border>保费</el-radio>
                     <el-radio label="2" border>件数</el-radio>
                   </el-radio-group>
                 </div>
                 <div>
                    <el-row :gutter="24">
                      <el-col :span="8" style="font-size: 14px; font-weight: 500;text-align: center">应交月: 2月</el-col>
                      <el-col :span="8" style="font-size: 14px; font-weight: 500;text-align: center">应交月: 3月</el-col>
                      <el-col :span="8" style="font-size: 14px; font-weight: 500;text-align: center">应交月: 4月</el-col>
                    </el-row>
                    <el-row :gutter="24">
                      <el-col :span="8" style="display: flex;justify-content: center;padding: 0 4px;margin: 0">
                        <div class="dachengInfo dachengInfo1">
                          <div style="font-size: 14px; margin-bottom: 6px">宽末达成率</div>
                          <div style="font-size: 18px; margin-bottom: 12px; font-weight: 500">97.42%</div>
                          <div style="font-size: 12px; margin-bottom: 6px">应收保费  1万元</div>
                          <div style="font-size: 12px; margin-bottom: 6px">实收保费  2万元</div>
                        </div>
                      </el-col>
                      <el-col :span="8" style="display: flex;justify-content: center;padding: 0 4px;margin: 0">
                        <div class="dachengInfo">
                          <div style="font-size: 14px; margin-bottom: 6px">宽一达成率</div>
                          <div style="font-size: 18px; margin-bottom: 16px; font-weight: 500">97.42%</div>
                          <div style="font-size: 12px; margin-bottom: 8px"><span style="color:rgb(152, 184, 206);">应收保费</span>  1万元</div>
                          <div style="font-size: 12px; margin-bottom: 8px"><span style="color:rgb(152, 184, 206);">实收保费</span>  2万元</div>
                        </div>
                      </el-col>
                      <el-col :span="8" style="display: flex;justify-content: center;padding: 0 4px;margin: 0">
                        <div class="dachengInfo">
                          <div style="font-size: 14px; margin-bottom: 6px">当月达成率</div>
                          <div style="font-size: 18px; margin-bottom: 12px; font-weight: 500">97.42%</div>
                          <div style="font-size: 12px; margin-bottom: 6px"><span style="color:rgb(152, 184, 206);">应收保费</span>  1万元</div>
                          <div style="font-size: 12px; margin-bottom: 6px"><span style="color:rgb(152, 184, 206);">实收保费</span>  2万元</div>
                        </div>
                      </el-col>
                    </el-row>
                 </div>
               </div>
             </div>
           </div>
           <div>
             <el-row :gutter="24">
               <el-col :span="18" style="padding-right: 0">
                 <div class="card">
                   <div class="title">
                     <span class="title-r">考核测算</span>
                     <span class="title-b">更多 <i class="el-icon-arrow-right"></i></span>
                   </div>
                   <div class="content">
                     <div id="chart3" style="width: 256px;height: 128px"></div>
                     <div class="cesuan" style="flex: 1;margin-left: 6px">
                       <div class="cesuanInfo" style="margin-right: 6px">
                         <div style="display: flex; align-items: center;height: 60px;padding: 0 6px">
                           <img src="../../../assets/renewal/shouyeW01.png" style="width: 28px; height: 32px;margin-right: 6px">
                           <div>
                             <div style="color: rgb(153, 153, 153); line-height: 24px; font-size: 14px">目标可收</div>
                             <div style="color: #000;line-height: 24px; font-size: 16px">30件</div>
                           </div>
                         </div>
                         <div>
                           <div style="display: flex;justify-content: space-between;font-size: 12px">
                             <span style="color: rgb(153, 153, 153);">实际已收</span>
                             <span style="color: #000">26/35件</span>
                           </div>
                           <el-slider v-model="value1" :min="0" :max="35" :show-tooltip="false" style="margin: 0 4px"></el-slider>
                         </div>
                       </div>
                       <div class="cesuanInfo" style="width: 142px">
                         <div style="display: flex; align-items: center; height: 60px;padding: 0 6px">
                           <img src="../../../assets/renewal/shouyeW02.png" style="width: 28px; height: 32px;margin-right: 6px">
                           <div>
                             <div style="color: rgb(153, 153, 153); line-height: 24px; font-size: 14px">预估薪资</div>
                             <div style="color: #000;line-height: 24px; font-size: 16px">11000.00元</div>
                           </div>
                         </div>
                         <div>
                           <div style="display: flex;justify-content: space-between;font-size: 12px">
                             <span style="color: rgb(153, 153, 153);">目标薪资</span>
                             <span style="color: #000">12000元</span>
                           </div>
                           <el-slider v-model="value2" :min="0" :max="11000" :show-tooltip="false" style="margin: 0 4px"></el-slider>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </el-col>
               <el-col :span="6" style="padding: 0 12px 0 0">
                 <div class="card" style="min-height: 212px">
                   <div class="title">
                     <span class="title-r">快捷入口</span>
                     <span class="title-b" style="color:rgb(46, 132, 242);"><i class="el-icon-edit"></i> 自定义</span>
                   </div>
                   <div style="padding: 12px 12px">
                     <el-row :gutter="24">
                       <el-col v-for="(item, index) in btnsList" :key="index" :span="8" class="gongju" style="padding: 0">
                         <div class="gongjuIcon"><img :src="item.icon" style="width: 20px; height: 24px"></div>
                         <div class="gongjuInfo">{{ item.text }}</div>
                       </el-col>
                     </el-row>
                   </div>
                 </div>
               </el-col>
             </el-row>
           </div>
         </el-col>
         <el-col :span="7">
           <div class="leftCon">
             <div class="toLeftBtn">
               <img src="../../../assets/renewal/info.png" @click="$router.push({name: 'NewsCenter'})" style="cursor: pointer;">
               <span @click="$router.push({name: 'NewsCenter'})" style="cursor: pointer;">进入消息中心</span>
               <i class="el-icon-arrow-right" @click="$router.push({name: 'NewsCenter'})" style="cursor: pointer;"></i>
             </div>
             <div class="userInfo">
               <img src="../../../assets/renewal/avatar.png" style="width: 66px; height: 66px; border-radius: 50%">
               <div style="margin: 12px 0 6px;color: #000;font-weight: 500">许美丽</div>
               <div style="color: rgb(118, 118, 118)">xx支公司  业务员</div>
             </div>
             <el-row :gutter="24">
               <el-col :span="9" class="userBtn" style="padding: 0">
                 <div style="color: rgb(8, 117, 255); font-size: 14px; margin-bottom: 4px">目标完成度</div>
                 <div style="color: rgb(8, 117, 255); font-size: 20px">70.21%</div>
               </el-col>
               <el-col :span="6" class="userBtn" style="padding: 0">
                 <div style="color: rgb(103, 112, 120); font-size: 14px; margin-bottom: 4px">待办事项</div>
                 <div style="color: rgb(0, 0, 0); font-size: 14px; margin-bottom: 4px">7</div>
               </el-col>
               <el-col :span="9" class="userBtn" style="padding: 0">
                 <div style="color: rgb(103, 112, 120); font-size: 14px; margin-bottom: 4px">消息通知</div>
                 <div style="color: rgb(0, 0, 0); font-size: 14px; margin-bottom: 4px">20</div>
               </el-col>
             </el-row>
             <div class="userSel">
               <div style="display:flex;align-items: center">
                 <img src="../../../assets/renewal/jiangbei.png" style="width: 18px; height: 20px;margin-right: 6px">
                 <span style="font-size: 12px;color: rgb(16, 16, 16)">目标达成率完成度排行</span>
               </div>
               <el-select v-model="tabSelect" style="width: 120px; height: 40px">
                 <el-option value="1" label="当月"></el-option>
                 <el-option value="2" label="当年"></el-option>
               </el-select>
             </div>
             <el-table :data="tableList" max-height="440" style="margin-top: 18px">
               <el-table-column prop="ranking" label="排名" min-width="60" align="center"></el-table-column>
               <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
               <el-table-column prop="makeUp" label="占比" min-width="100" align="center"></el-table-column>
             </el-table>
             <div class="fixed-row">
               <img src="../../../assets/renewal/avatar.png" style="width: 32px; height: 32px; border-radius: 50%;margin: 0 4px 0 4px">
               <span style="font-weight: 500;font-size: 12px;margin-right:6px">许美丽</span>
               <span style="font-size: 12px;margin-right:4px">当前完成度</span>
               <span style="font-size: 12px;margin-right:6px">70.21%</span>
               <span style="font-size: 12px;margin-right:4px">当前排名</span>
               <span style="font-size: 12px;">29</span>
             </div>
           </div>
         </el-col>
       </el-row>
     </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: "homePage", //续期首页
  props:{

  },
  components:{

  },
  data(){
    return{
      activeName: '1',
      activeName2: '1',

      value1: 26,
      value2: 12000,

      btnsList: [
        { icon: require('@/assets/renewal/shouyeB01.png'), text: '消息查询', },
        { icon: require('@/assets/renewal/shouyeB02.png'), text: '保单查询', },
        { icon: require('@/assets/renewal/shouyeB03.png'), text: '风险查询', },
        { icon: require('@/assets/renewal/shouyeB04.png'), text: '日志录入', },
        { icon: require('@/assets/renewal/shouyeB05.png'), text: '品质报告', },
        { icon: require('@/assets/renewal/shouyeB06.png'), text: '知识库', },
      ],

      tabSelect: '1',

      tableList: [
        { ranking: '1', name: '李佳迪', makeUp: '80.21%'},
        { ranking: '2', name: '董岚', makeUp: '79.21%'},
        { ranking: '3', name: '邓澜', makeUp: '78.21%'},
        { ranking: '4', name: '康伟', makeUp: '77.21%'},
        { ranking: '5', name: '袁亮', makeUp: '76.21%'},
        { ranking: '6', name: '罗健', makeUp: '75.21%'},
        { ranking: '7', name: '陆冠', makeUp: '74.21%'},
        { ranking: '8', name: '康燕', makeUp: '73.21%'},
        { ranking: '9', name: '邵政', makeUp: '72.91%'},
        { ranking: '10', name: '傅芬', makeUp: '72.84%'},
        { ranking: '11', name: '梁琳', makeUp: '72.65%'},
        { ranking: '12', name: '汪燕', makeUp: '72.61%'},
        { ranking: '13', name: '李大为', makeUp: '72.53%'},
        { ranking: '14', name: '马道', makeUp: '72.32%'},
        { ranking: '15', name: '傅大', makeUp: '72.21%'},
        { ranking: '16', name: '王博', makeUp: '72.19%'},
      ]
    }
  },
  watch:{

  },
  methods:{
    chartInit(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart1'));

      const colors = ['#5470C6', 'rgb(245, 151, 19)'];
      var option = {
        color: colors,
        tooltip: {
          trigger: 'axis',  // 修改为 'axis' 以便同时显示两个 Y 轴的数据
          formatter: function (params) {
            let tooltipStr = `${params[0].axisValue}<br/>`;
            params.forEach(item => {
              tooltipStr += `${item.seriesName}: ${item.data}%<br/>`;
            });
            return tooltipStr;
          }
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#000'
            }
          },
          data: ['2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06']
        },
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation(2015)',
            position: 'left',
            min: 80,        // 设置最小值为 80%
            max: 100,       // 设置最大值为 100%
            interval: 5,    // 设置间隔为 5%
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              formatter: '{value}%'  // 加入百分号
            }
          },
          {
            type: 'value',
            // name: 'Precipitation(2016)',
            position: 'right',
            min: -10,       // 设置最小值为 -10%
            max: 10,        // 设置最大值为 10%
            interval: 5,    // 设置间隔为 5%
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              formatter: '{value}%'  // 加入百分号
            }
          }
        ],
        series: [
          {
            name: '月度继续率',
            type: 'line',
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false, // 不显示标记点
            emphasis: {
              focus: 'series'
            },
            data: [
              93, 95, 92, 97, 95, 96, 94, 97, 98, 93, 94, 92
            ],
            areaStyle: {
              // 设置渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#81a8fc'  // 渐变开始色
                  },
                  {
                    offset: 1,
                    color: '#fff'  // 渐变结束色
                  }
                ]
              }
            },
            lineStyle: {
              width: 0 // 设置线条宽度
            }
          },
          {
            name: '月度继续率同比',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [
              4, 2, -1, -3, 0, 1, 3, 4, 2, -3, -1, 4
            ],
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    chartInit2(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart2'));

      var option = {
        tooltip: {
          trigger: 'axis',  // 修改为 'axis' 以便同时显示两个 Y 轴的数据
        },
        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#000'
            }
          },
          data: ['2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06']
        },
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation(2015)',
            position: 'left',
            min: 80,        // 设置最小值为 80%
            max: 100,       // 设置最大值为 100%
            interval: 5,    // 设置间隔为 5%
            axisLine: {
              lineStyle: {
                color: '#000'
              }
            },
            axisLabel: {
              formatter: '{value}%'  // 加入百分号
            }
          }
        ],
        series: [
          {
            name: '二次',
            type: 'line',
            smooth: true,
            showSymbol: false, // 不显示标记点
            emphasis: {
              focus: 'series'
            },
            data: [
              96, 95, 97, 98, 96, 97, 95, 97, 98, 96, 97, 95
            ],
            areaStyle: {
              // 设置渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(47, 134, 246, 0.45)'  // 渐变开始色
                  },
                  {
                    offset: 1,
                    color: '#fff'  // 渐变结束色
                  }
                ]
              }
            },
            lineStyle: {
              width: 0 // 设置线条宽度
            }
          },
          {
            name: '三次',
            type: 'line',
            smooth: true,
            showSymbol: false, // 不显示标记点
            emphasis: {
              focus: 'series'
            },
            data: [
              94, 92, 93, 91, 94, 92, 93, 94, 92, 93, 91, 92,
            ],
            areaStyle: {
              // 设置渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 203, 66, 0.52)'  // 渐变开始色
                  },
                  {
                    offset: 1,
                    color: '#fff'  // 渐变结束色
                  }
                ]
              }
            },
            lineStyle: {
              width: 0 // 设置线条宽度
            }
          },
          {
            name: '四次及以上',
            type: 'line',
            smooth: true,
            showSymbol: false, // 不显示标记点
            emphasis: {
              focus: 'series'
            },
            data: [
              87, 88, 86,  88, 86, 85, 87, 85, 86,89,86, 87,
            ],
            areaStyle: {
              // 设置渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(39, 246, 146, 0.7)'  // 渐变开始色
                  },
                  {
                    offset: 1,
                    color: '#fff'  // 渐变结束色
                  }
                ]
              }
            },
            lineStyle: {
              width: 0 // 设置线条宽度
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    chartInit3(){
      var myChart = echarts.init(document.getElementById('chart3'));
      const data = [
        {
          'name': '代收费',
          'value': 64,
          'count': 64
        },
        {
          'name': '终止/失效',
          'value': 20,
          'count': 20
        },
        {
          'name': '收费成功',
          'value': 16,
          'count': 16
        },
      ]
      let options = {
        title: {
          text: "100件" + '\n\n' + '总件数',
          left: '24%',
          top: 'center',
          textAlign: 'center',  // 确保文本在中心对齐
          textStyle: {
            color: '#4a4a4a', // 设置标题颜色
            fontSize: 14,     // 设置标题字体大小
            fontWeight: '400' // 设置字体加粗
          }
        },
        tooltip: {
        },
        legend: {
          orient: 'vertical',
          right: '0%',
          top: 'center',
          formatter: function(name) {
            const item = data.find(d => d.name === name);
            return item ? `${name} ${item.value}件` : name;
          }
        },
        color: [ '#082aff', '#FFAD3A',  'rgb(98, 198, 155)',],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],  // 调整半径，以适应更小的空间
            center: ['25%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data
          }
        ]
      }
      myChart.setOption(options)
    }
  },
  mounted() {
    this.chartInit()
    this.chartInit2()
    this.chartInit3()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.card{
  margin: 12px;
  background: #fff;
  border-radius: 8px;
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(242, 242, 242);
    line-height: 34px;
    padding: 4px 12px;
    .title-r{
      font-weight: 500;
      font-size: 16px;
      color: #000;
      position: relative;
      &::before{
        position: absolute;
        top: 50%;
        left: -12px;
        transform: translateY(-50%);
        content: "";
        width: 3px;
        height: 16px;
        background-color: #082aff;
      }
    }
    .title-b{
      color: rgb(153, 153, 153);
    }
  }
  .content {
    display: flex;
    padding: 12px 8px 4px 6px;
    .zhanbi{
      flex: 1;
      .checkBox{
        display: flex;
        justify-content: end;
        margin-bottom: 12px;
      }
      .show001{
        display: flex;
        justify-content: center;
        padding: 12px;
        background: none!important;
        .showInfo{
          display: flex;
        }
      }
    }
  }
}

.dachengInfo{
  padding: 12px 12px;
  margin: 12px 4px;
  background: rgb(249, 252, 255);
  border-radius: 8px;
  color: #000;
  text-align: center;
}

.dachengInfo1{
  border: 1px solid rgb(8, 117, 255);
  box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.25);
}

.cesuan{
  display: flex;
  justify-content: space-around;
  padding: 12px 6px;
}

.cesuanInfo{
  background: rgb(247, 249, 250);
  border-radius: 6px;
  padding: 0px 4px 0px 8px;
  width: 132px;
}

::v-deep{
  .el-radio__input{
    display: none;
  }
  .el-radio{
    width: 66px;
    height: 32px;
    margin-right: 16px;
  }
  .el-radio.is-checked{
    background: rgba(64, 158, 255, 0.2);
    border: 0;
  }
  .el-col{
    padding: 0;
  }
}

.gongju{
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 12px;
  flex-direction: column;
  align-items: center;
  padding: 12px;
}

.gongjuIcon{
  width: 32px;
  height: 32px;
  background: rgba(33, 122, 249, 0.1);
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  padding: 4px;
  align-items: center;
  justify-content: center;
}

.gongjuInfo{
  font-size: 12px;
  color: #000;
}

.toLeftBtn{
  display: flex;
  justify-content: end;
  align-items: center;
  height: 36px;
  margin-bottom: 6px;
}

.leftCon{
  min-height: 870px;
  margin-top: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.userInfo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 18px;
  flex-direction: column;
}

.userBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.userSel{
  height: 40px;
  padding: 8px 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid rgb(242, 242, 242)
}

.fixed-row {
  padding: 10px;
  box-shadow: 0px -2px 8px 0px rgba(188, 206, 216, 0.25);
  border: 1px solid rgb(241, 241, 241);
  color: #000;
  font-size: 14px;
  display: flex;
  align-items: center;
}
</style>
